import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import QtQml 2.12
Item{
    // property var friedUser
    property string userfriendName
    property string friendImg
    property var chatData:[
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 12:16"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"没干嘛啊",msgTime:"2023/12/25 12:25"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 1:45"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"还问?还问抽你压的!",msgTime:"2023/12/25 1:50"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:false,messAges:"https://hao5.qhimg.com/t0183e92c23fa39ed18.jpg",msgTime:"2023/12/25 1:50"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 12:16"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"没干嘛啊",msgTime:"2023/12/25 12:25"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 1:45"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"还问?还问抽你压的!",msgTime:"2023/12/25 1:50"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:false,messAges:"https://ts1.cn.mm.bing.net/th/id/R-C.392a6339adbcc8c41ac88f0a05f9b49d?rik=MCzQyDrL1LEmjg&riu=http%3a%2f%2fwww.kutoo8.com%2fupload%2fimage%2f34646263%2fdn201307151003.jpg&ehk=6HlzfgwgJFMoHY9DLXu7NzdbNvWRYdR%2fco0hPi%2fWDHE%3d&risl=&pid=ImgRaw&r=0",msgTime:"2023/12/25 1:50"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 12:16"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"没干嘛啊",msgTime:"2023/12/25 12:25"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 1:45"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"还问?还问抽你压的!",msgTime:"2023/12/25 1:50"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:false,messAges:"https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?rs=1&pid=ImgDetMain",msgTime:"2023/12/25 1:50"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 12:16"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"没干嘛啊",msgTime:"2023/12/25 12:25"},
        {id:2,isUser:false,friendImg:friendImg,userName:firendData.friendName,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 1:45"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:true,messAges:"还问?还问抽你压的!",msgTime:"2023/12/25 1:50"},
        {id:1,isUser:true,friendImg:user.headImg,userName:"荒原",msgType:false,messAges:"https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg",msgTime:"2023/12/25 1:50"},

    ]

    Rectangle{

        anchors.fill: parent
        color:"#ededed"

        //上
        Rectangle{
            id:chatTop
            anchors.top: parent.top
            height:82
            width:parent.width
            color:"#f5f5f5"
            border.color: "#e7e7e7"

            Text{
                id:name
                text:firendData.friendName
                font.bold: true
                font.pixelSize: 25
                color:"#000000"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                anchors.leftMargin: 25
            }

            Button{
                height:40
                width:40
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.topMargin: 40
                background: Rectangle{
                    anchors.fill: parent
                    color:"transparent"
                }
                icon{
                    height:20
                    width:20
                    color:"#4b4b4b"
                    source:"qrc:/images/shengluehao"

                }
            }
        }

        //中
        Rectangle{
            id:mid
            height:parent.height-chatBottom.height-chatTop.height
            width:parent.width
            anchors.top: chatTop.bottom
            color:"#f5f5f5"
            border.color: "#e7e7e7"

            Rectangle{

                anchors.fill: parent
                color:"#f5f5f5"
                anchors.topMargin: 1
                anchors.bottomMargin: 0
                anchors.rightMargin: 0
                anchors.leftMargin: 0

                ListView{

                    width:parent.width
                    height:parent.height


                    orientation: ListView.Vertical//垂直列表
                    interactive: true;//元素可拖动
                    clip: true //


                    ScrollBar.vertical: ScrollBar {
                        id: scrollBar
                        onActiveChanged: {

                            active = true;
                        }
                        Component.onCompleted: {

                        }
                    }
                    spacing:20
                    model:ListModel{
                        id:chatInfoListViewModel
                    }




                    delegate:menuViewDelegate
                }


                Component{
                    id:menuViewDelegate

                    Rectangle{
                        id:menuViewDelegateItem
                        height:msgType?80:250
                        width:mid.width
                        color:"#f5f5f5"
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onClicked:  {
                            }
                        }
                        Image{
                            id:userImg
                            anchors.right:isUser?parent.right:undefined
                            anchors.rightMargin:30
                            anchors.left: isUser?undefined:parent.left
                            anchors.leftMargin:30
                            height:42
                            width:42
                            source:friendImg
                            anchors.verticalCenter: parent.verticalCenter
                        }
                        Image{
                            visible:!msgType
                            height:200
                            width:100
                            source:!msgType?messAges:""
                            anchors.right:isUser?userImg.right:undefined
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.rightMargin:50
                            anchors.left: isUser?undefined:userImg.left
                            anchors.leftMargin:50
                        }
                        Rectangle{
                            visible:msgType
                            anchors.right:isUser?userImg.right:undefined
                            anchors.verticalCenter: parent.verticalCenter
                            anchors.rightMargin:50
                            anchors.left: isUser?undefined:userImg.left
                            anchors.leftMargin:50
                            height:40
                            width:usermsg.contentWidth+20
                            color:isUser?"#95ec69":"#ffffff"
                            Text{
                                anchors.verticalCenter: parent.verticalCenter
                                anchors.left: parent.left
                                anchors.leftMargin: 10
                                id:usermsg
                                text:messAges
                                font.bold: true
                                font.pixelSize: 15
                                color:"#232323"
                            }
                        }

                    }


                }
            }

            Component.onCompleted: {
                console.log("聊天框创建")
                chatInfoListViewModel.append(chatData)
            }

        }


        //下

        Rectangle{
            id:chatBottom
            height:160
            width:parent.width
            anchors.bottom: parent.bottom
            color:"#f5f5f5"
            border.color: "#e7e7e7"

            Rectangle{
                id:show
                anchors.left:parent.left
                anchors.leftMargin: 20
                anchors.top: parent.top
                width:160
                height:50
                color:"#f5f5f5"

                RowLayout{
                    anchors.fill: parent
                    spacing:0
                    Button{
                        id:biaoqingBtn
                        height:40
                        width:40
                        icon{
                            height:20
                            width:20
                            source:"qrc:/images/xiaolian"
                            color:"#505050"
                        }
                        background: Rectangle{
                            anchors.fill: parent
                            color:"#f5f5f5"
                            MouseArea{
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    biaoqingBtn.icon.color="#313131"
                                }
                                onExited: {
                                    biaoqingBtn.icon.color="#505050"
                                }
                            }
                        }
                    }

                    Button{
                        id:wenjianjiaBtn
                        height:40
                        width:40
                        icon{
                            height:20
                            width:20
                            source:"qrc:/images/wenjianjia"
                            color:"#505050"
                        }
                        background: Rectangle{
                            anchors.fill: parent
                            color:"#f5f5f5"
                            MouseArea{
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    wenjianjiaBtn.icon.color="#313131"
                                }
                                onExited: {
                                    wenjianjiaBtn.icon.color="#505050"
                                }
                            }
                        }
                    }

                    Button{
                        id:jietuBtn
                        height:40
                        width:40
                        icon{
                            height:20
                            width:20
                            source:"qrc:/images/jietu"
                            color:"#505050"
                        }
                        background: Rectangle{
                            anchors.fill: parent
                            color:"#f5f5f5"
                            MouseArea{
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    jietuBtn.icon.color="#313131"
                                }
                                onExited: {
                                    jietuBtn.icon.color="#505050"
                                }
                            }
                        }
                    }

                    Button{
                        id:chatIconBtn
                        height:40
                        width:40
                        icon{
                            height:20
                            width:20
                            source:"qrc:/images/chatIcon"
                            color:"#505050"
                        }
                        background: Rectangle{
                            anchors.fill: parent
                            color:"#f5f5f5"
                            MouseArea{
                                anchors.fill: parent
                                hoverEnabled: true
                                onEntered: {
                                    chatIconBtn.icon.color="#313131"
                                }
                                onExited: {
                                    chatIconBtn.icon.color="#505050"
                                }
                            }
                        }
                    }
                }


            }


            //内容输入框
            Rectangle{
                anchors.top: show.bottom
                height:65
                width:parent.width
                color:"#f5f5f5"

                TextInput{
                    id:sendData
                    selectByMouse: true //设置光标大小
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.top: parent.top
                    anchors.topMargin: 25
                    height:40
                    width:parent.width
                    font.bold: true
                    font.pixelSize: 25
                    text:"你好 美女"
                }
            }

            Button{
                id:sendBtn
                height:40
                width:125
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 20
                anchors.right: parent.right
                anchors.rightMargin: 30
                Text {
                    anchors.centerIn: parent
                    text: "发送(S)"
                    font.pixelSize: 20
                    color:"#07c160"
                    font.bold: true
                }
                background: Rectangle{
                    id:sendBtnRectangle
                    anchors.fill: parent
                    color:"#e9e9e9"
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            sendBtnRectangle.color="#d2d2d2"
                        }
                        onExited: {
                            sendBtnRectangle.color="#e9e9e9"
                        }
                        onClicked: {
                            chatInfoListViewModel.append( {id:2,isUser:false,friendImg:friendImg,userName:name,msgType:true,messAges:"你在干嘛?",msgTime:"2023/12/25 12:16"},)
                        }
                    }
                }
            }



        }

    }
    Component.onCompleted: {
        console.log("跳转右边聊天页----------------------------------------------------------------------")
        console.log(firendData.friendName)
        friendImg=firendData.headImg
        // console.log("头像"+firendData.headImg)
        // var url = Qt.resolvedUrl(source);
        // console.log(friedUser)
        // console.log(url)
        // console.log("昵称",firendData.firendName)

        // userfriendName=firendData.firendName


        console.log(1111111111111111111111111111111)

        console.log(friendImg)



        console.log(1111111111111111111111111111111)

    }
}
